<template>
    <div>
        <el-form :model="fromData" :rules="rules" class="form-div" label-width="auto" @validate="validate">
            <div>
                <el-row>
                    <el-form-item label="导航时间" prop="navigationTime">
                        <el-input v-model="fromData.navigationTime" />
                    </el-form-item>
                    <el-form-item label="导航电量" prop="quantityOfElectricity">
                        <!-- <el-input v-model="fromData.quantityOfElectricity" type="number" /> -->
                        <el-input-number v-model="fromData.quantityOfElectricity" :min="0" :max="100" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="账号名称字体" prop="adminNameFont">
                            <el-input v-model="fromData.adminNameFont" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="账号ID字体" prop="adminIdFont">
                            <el-input v-model="fromData.adminIdFont" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="账号粉丝字体" prop="adminFsFont">
                            <el-input v-model="fromData.adminFsFont" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="居中日期字体" prop="dateFont">
                            <el-input v-model="fromData.dateFont" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="气泡文字字体" prop="qipaoFont">
                            <el-input v-model="fromData.qipaoFont" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";

const fromData = ref({
    navigationTime: "12:30",
    quantityOfElectricity: 40,
    adminNameFont: '"华文中宋", "STZhongsong", serif',
    adminIdFont: '"微软雅黑", "Microsoft YaHei", "PingFang SC", sans-serif',
    adminFsFont: '"华文中宋", "STZhongsong", serif',
    dateFont: "宋体, SimSun, sans-serif",
    qipaoFont: "宋体, SimSun, sans-serif",
});

const rules = reactive({
    navigationTime: [
        {required: true, message: "请输入导航时间", trigger: "change"},
        // {min: 3, max: 10, message: "用户名长度为3到10个字符", trigger: "blur"},
    ],
    quantityOfElectricity: [
        {required: true, message: "请输入导航电量", trigger: "change"},
        // {min: 6, max: 18, message: "密码长度为6到18个字符", trigger: "blur"},
    ],

    adminNameFont: [
        {required: true, message: "请输入设置字体", trigger: "change"},
        // {min: 3, max: 10, message: "用户名长度为3到10个字符", trigger: "blur"},
    ],
    adminIdFont: [
        {required: true, message: "请输入设置字体", trigger: "change"},
        // {min: 6, max: 18, message: "密码长度为6到18个字符", trigger: "blur"},
    ],
    adminFsFont: [
        {required: true, message: "请输入设置字体", trigger: "change"},
        // {min: 6, max: 18, message: "密码长度为6到18个字符", trigger: "blur"},
    ],
    dateFont: [
        {required: true, message: "请输入设置字体", trigger: "change"},
        // {min: 6, max: 18, message: "密码长度为6到18个字符", trigger: "blur"},
    ],
    qipaoFont: [
        {required: true, message: "请输入设置字体", trigger: "change"},
        // {min: 6, max: 18, message: "密码长度为6到18个字符", trigger: "blur"},
    ],
});

const emits = defineEmits(["onSelectChange"]);
const validate = (options) => {
    emits("onSelectChange", fromData.value);
    changeFont(fromData.value.font);
};
const changeFont = (font) => {
    console.log("font", font);
    document.documentElement.style.fontFamily = font;
};
</script>

<style lang="scss" scoped>
.form-div {
    display: flex;
    .el-form-item {
        // max-width: 300px;
        margin-left: 20px;
        margin-top: 15px;
        :deep(.el-form-item__label) {
            color: #333;
            font-size: 12px;
            font-weight: 500;
        }
    }
}
</style>
